<template>
  <div class="top">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/index">权限</a></el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="middle">
    <div class="search">
      <div class="search-top">
        <span>筛选搜索</span>
        <el-row class="mb-4">
          <el-button>重置</el-button>
          <el-button type="primary" @click="search">查询搜索</el-button>
        </el-row>
      </div>
      <div class="search-bot">
        <span>角色名称：</span>
        <el-input
          v-model="keyword"
          placeholder="请输入账号、姓名"
          style="width: 30%"
        />
      </div>
    </div>

    <div class="list">
      <span>数据列表</span>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%; font-size: 12px"
      align="center"
      table-layout="auto"
    >
      <el-table-column prop="id" label="编号" align="center" />
      <el-table-column prop="name" label="角色名字" align="center" />
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column prop="adminCount" label="用户数" align="center" />
      <el-table-column label="添加时间" align="center">
        <template #default="scope">
          {{ formatData(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作 " align="center">
        <template #default="{ row }">
          <el-button>分配资源</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- <-- 分页 -->
  <el-pagination
    v-model:currentPage="pageination.currentPage"
    v-model:page-size="pageination.pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :small="pageination.small"
    :background="pageination.background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import * as http from "@/request/http";
import dayjs from "dayjs";
import { userTable } from "@/hooks/component/userTable";

const keyword = ref("");
let {
  tableData,
  pageination,
  handleSizeChange,
  handleCurrentChange,
  fetchData,
} = userTable(http.role.getRoleList, { keyword: keyword });

//格式化时间
function formatData(date?: string) {
  if (!date) return "";
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}

function search() {
  fetchData();
}
</script>

<style scoped>
.middle {
  margin: 20px 25px;
}

.el-breadcrumb {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.search {
  height: 100px;
  border: 1px solid #eee;
  padding: 20px;
  font-size: 14px;
}
.search-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.search-bot {
  padding: 20px 50px;
}

.list {
  height: 20px;
  border: 1px solid #eee;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.list > span {
  padding-left: 20px;
  font-size: 14px;
}

.el-pagination {
  float: right;
  padding-right: 30px;
}
</style>
